<template>
  <h1>n的值:{{n}}</h1>
  <button @click="n++">点我n++</button>
  <h1>{{hello}}</h1>
  <button @click="hello += '!'">点我打招呼</button>
  <h1>我的工作:{{job.name}}</h1>
  <h1>我的薪水:{{job.salary}}</h1>
  <h1>内心独白:{{job.data.msg}}</h1>
  <button @click = "job.name = '后端'">点击修改我的工作</button>
  <button @click="job.salary = '10k'">点我跳槽加薪</button>
  <button @click="job.data.msg = '给我一万 我要猛干'">点击改变内心独白</button>
</template>

<script>
//引入watch函数
import {reactive, ref, watch} from "vue";

export default {
  name: "my-demo",
  setup() {
    let n = ref(0);
    let hello = ref('hello');
    let job = reactive({
      name:'前端',
      salary:"5k",
      data:{
        msg:'妈的，前后端老子都干 就给5k 干个蛋啊'
      }
    })
    //监视属性 一个属性 (第一个参数：监视的属性 第二个参数：回调函数 第三个参数：配置项对象)
    // watch(n,(newValue,oldValue) => {
    //   console.log('n变化了',newValue,oldValue)
    // },{immediate:true});

    // //监视多个属性 第一个参数:属性数组 第二个参数:回调函数(注意:里面的newValue和oldValue都是数组 初始化时数组为空) 第三个参数:配置对象
    // watch([n,hello],(newValue,oldValue) => {
    //   console.log('改变了',newValue,oldValue);
    // },{immediate:true})

    //当watch监视reactive生成对象的多个属性时 默认开启深度监视(无法被修改) 并且oldValue无法获得
    // watch(job,(newValue,oldValue) => {
    //   console.log('我的工作发生改变了',newValue.name,oldValue.name)
    // })

    // //当watch监视reactive生成对象的一个属性时 这里监视的属性必须要是一个函数中的返回值
    // watch(() => job.name,(newValue,oldValue) => {
    //   console.log('你跳槽了',newValue,oldValue)
    // })
    // //当watch监视reactive生成对象的多个属性时 传入一个数组(函数数组) newValue和oldValue同样是两个数组
    // watch([() => job.name,() => job.salary] ,(newValue,oldValue) => {
    //   console.log('你跳槽了',newValue,oldValue)
    // })
    //当watch监视reactive生成对象的一个属性(同样是对象) 这里要开启深度监视的配置
    watch(() => job.data ,(newValue,oldValue) => {
      console.log('你跳槽了',newValue,oldValue)
    },{deep:true})

    return {
      n,
      hello,
      job
    }
  }
}
</script>

<style scoped>

</style>